第十一章笔记

(1)DOM扩展

这难道不就是jquery干的事情吗？？

querySelector()方法
querySelector()方法接收一个 CSS 选择符，返回与该模式匹配的第一个元素，如果没有找到匹
配的元素，返回 null。请看下面的例子。
<html>

<body>

    <body>

        <div id="myDiv">
               dlskajflk
        </div>
    </body>
    <script>
      var body=document.querySelector("body");
      var myDiv=document.querySelector("#myDiv");
      alert(myDiv.outerHTML);//输出 <div id="myDiv"> dlskajflk</div>
    </script>
</body>

</html>

(2)Html5定义了大量的JavaScript的API

1 比较有特点的是插入标记。可以直接设置一个便签的innerHTML直接插入一些便签。

在读模式下，innerHTML 属性返回与调用元素的所有子节点（包括元素、注释和文本节点）对应
的 HTML 标记。在写模式下，innerHTML 会根据指定的值创建新的 DOM 树，然后用这个 DOM 树完全
替换调用元素原先的所有子节点。下面是一个例子。
<div id="content">
 <p>This is a <strong>paragraph</strong> with a list following it.</p>
 <ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 </ul>
</div>
对于上面的<div>元素来说，它的 innerHTML 属性会返回如下字符串。
<p>This is a <strong>paragraph</strong> with a list following it.</p>
<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
</ul>

而设置也超级简单。

div.innerHTML = “Hello & welcome, \”reader\”!“;

(3)不要频繁使用innerHTML

<html>

<body>

    <body>

        <div id="myDiv">
               dlskajflk
        </div>
    </body>
    <script>
      for(var i=0,len=values.length;i<len;i++){

        ul.innerHTML+="<li>"+values[i]+"</li>";
      }
   /*这个算法不好，这样会频繁的访问ul.innerHTML，性能很差*/
      var itemsHtml="";
      for(var i=0,len=values.length;i<len;i++){
          itemsHtml+="<li>"+values[i]+"</li>";
      }
      ul.innerHTML=itemsHtml;
      /*我们应该不断累加，再一次性加给innerHTML。*/
    </script>
</body>

</html>

(4)contains()方法

在实际开发中，经常需要知道某个节点是不是另一个节点的后代。IE 为此率先引入了 contains()
方法，以便不通过在 DOM 文档树中查找即可获得这个信息。调用 contains()方法的应该是祖先节点，
也就是搜索开始的节点，这个方法接收一个参数，即要检测的后代节点。如果被检测的节点是后代节点，
该方法返回 true；否则，返回 false。以下是一个例子：
alert(document.documentElement.contains(document.body)); //true
当然，考虑到不同浏览器之间的支持程度。我们可以使用一种通用的函数。比如。

function contains(refNode, otherNode) {
       if (typeof refNode.contains == "function" &&
           (!client.engine.webkit || client.engine.webkit >= 522)) {
           return refNode.contains(otherNode);
       } else if (typeof refNode.compareDocumentPosition == "function") {
           return !!(refNode.compareDocumentPosition(otherNode) & 16);
       } else {
           var node = otherNode.parentNode;
           do {
               if (node === refNode) {
                   return true;
               } else {
                   node = node.parentNode;
               }
           } while (node !== null);

           return false;
       }
   } 

   alert(contains(document.getElementById("myDiv")),document.getElementById("myLi"))

(5)innerText属性

通过 innertText 属性可以操作元素中包含的所有文本内容，包括子文档树中的文本。在通过
innerText 读取值时，它会按照由浅入深的顺序，将子文档树中的所有文本拼接起来。在通过
innerText 写入值时，结果会删除元素的所有子节点，插入包含相应文本值的文本节点。来看下面这
个 HTML 代码示例。

<div id="content">
 <p>This is a <strong>paragraph</strong> with a list following it.</p>
 <ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 </ul>
</div>
InnerTextExample01.htm
对于这个例子中的<div>元素而言，其 innerText 属性会返回下列字符串：
This is a paragraph with a list following it.
Item 1
Item 2
Item 3

(6)小结

虽然 DOM 为与 XML 及 HTML 文档交互制定了一系列核心 API，但仍然有几个规范对标准的 DOM
进行了扩展。这些扩展中有很多原来是浏览器专有的，但后来成为了事实标准，于是其他浏览器也都提
供了相同的实现。本章介绍的三个这方面的规范如下。

1 Selectors API，定义了两个方法，让开发人员能够基于 CSS 选择符从 DOM 中取得元素，这两个
方法是 querySelector()和 querySelectorAll()。

2 Element Traversal，为 DOM 元素定义了额外的属性，让开发人员能够更方便地从一个元素跳到
另一个元素。之所以会出现这个扩展，是因为浏览器处理 DOM 元素间空白符的方式不一样。

HTML5，为标准的 DOM 定义了很多扩展功能。其中包括在 innerHTML 属性这样的事实标准基
础上提供的标准定义，以及为管理焦点、设置字符集、滚动页面而规定的扩展 API。
虽然目前 DOM 扩展的数量还不多，但随着 Web 技术的发展，相信一定还会涌现出更多扩展来。很
多浏览器都在试验专有的扩展，而这些扩展一旦获得认可，就能成为“伪”标准，甚至会被收录到规范
的更新版本中。